<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="cate-success-dialog" v-if="visible">
                <div class="cate-success-dialog__mask"></div>

                <div class="cate-success-dialog__content">
                    <img
                        class="icon-success"
                        :src="`${_oss_}images/material-store/icon-cate-success.png`"
                    />

                    <div class="text">已加入购物车</div>

                    <div class="btn-group">
                        <div class="btn btn-primary" @click="onGoCate()">
                            查看购物车
                        </div>
                        <div class="btn btn-default" @click="onClose()">
                            继续浏览
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
const visible = ref(false);

const onClose = () => {
    visible.value = false;
};

const onGoCate = () => {
    visible.value = false;
    navigateTo("/admin/tradingCenter.html", {
        open: true,
    });
};

defineExpose({
    show() {
        visible.value = true;
    },
});
</script>
<style lang="scss" scoped>
.cate-success-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 340px;
        height: 246px;
        background: linear-gradient(180deg, #b6d1ff 0%, #ffffff 100%);
        border-radius: 10px;
        border: 1px solid #5085fb;
        text-align: center;

        .icon-success {
            width: 50px;
            height: 50px;
            margin-top: 41px;
        }

        .text {
            font-size: 20px;
            color: #5085fb;
            margin-top: 24px;
        }

        .btn-group {
            display: flex;
            justify-content: space-evenly;
            margin-top: 45px;

            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 110px;
                height: 30px;
                font-size: 14px;
                border-radius: 4px;
                cursor: pointer;
                color: #fff;

                &-primary {
                    background: #5085fb;
                }

                &-default {
                    background: #999999;
                }
            }
        }
    }
}
</style>
